<template>
  <div  @click="tagClick" :class="[isOpen ? activeClass : errorClass]" class="tagview-item"  @mouseenter="mouseEnterHandler" @mouseleave="mouseLeveHandler">
      <SvgIcon  class="icon" :name="icon"/>
      <span  class="tag-item-content">{{content}}</span>
      <SvgIcon @myClick="closeHandler($event)" v-show="closeShow" class="close-icon" name="baseline-close-px"/>
  </div>
</template>

<script>
import {ref, toRefs, watch} from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default {
    name: "TagViewItem",
    props:{
        icon: String,
        content: String,
        path: String,
        affix: Boolean,
        isOpen: Boolean
    },
    setup(props){

        const {state,dispatch} = useStore()
        const {push} = useRouter()
        const {affix,path} = props

        const closeShow = ref(false)

        const mouseEnterHandler = ()=>{
            if(affix == true){
                closeShow.value = false
                return
            }
            closeShow.value = true
        }
        const mouseLeveHandler = ()=>{
            if(affix == true){
                closeShow.value = false
                return
            }
            closeShow.value = false
        }

        const closeHandler = ($event)=>{
            $event.stopPropagation()
            dispatch('tab/closeTab',path)
            push(state.tab.tabList[state.tab.index].path)
        }

        const tagClick = ()=>{
            dispatch('tab/clickTab',path)
            push(path)
        }

        const activeClass = 'choose'
        const errorClass = 'no-choose'

        return{
            closeShow,mouseEnterHandler,mouseLeveHandler,closeHandler,tagClick,activeClass,errorClass
        }
    }
}
</script>

<style lang="scss" scoped>
.choose{
    margin-top: 5px;
    border-top: 3px  solid #f26b3a;
}

.no-choose{
    margin-top: 7px;
    border-top: 1px  solid #eaeaea;
}

.tagview-item{
    position: relative;
    display: inline-block;
    
    border-bottom: 1px  solid #eaeaea;
    border-right: 1px  solid #eaeaea;
    border-left: 1px  solid #eaeaea;
    padding: 7px 20px;
    border-radius: 5px 5px 0 0;
    background-color: #fafafa;

    &:hover{
        background-color: #fff;
        cursor: pointer;
        border-bottom: none;
    }

    .icon{
        margin-right: 5px;
        width: 14px;
        height: 14px;
    }
    .tag-item-content{
        font-size: 13px;
    }

    .affix{
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-left: 5px;
        border-radius: 50%;
        background: #f47023;
        margin-right: 5px;
    }

    .close{
        display: inline-block;
        margin-left: 10px;
        background: #f47023;
        color: #fff;
        border-radius: 50%;
        box-sizing: border-box;
        
    }

    .close-icon{
        position: absolute;
        top: 12px;
        right: 0px;
        border-radius: 50%;
        background: #f47023;
        color: #fff;
        width: 10px;
        height: 10px;
    }
}
</style>